<template>
    <div>
        <van-cell-group>
            <van-cell :title="itemTitle" icon="wap-nav" />
        </van-cell-group>
        <van-row>
            <van-col span="12" v-for="(item,index) in list" :key="index" @click.native="showDetail(item.id)">
                <div class="movie-item">
                    <div class="movie-poster">
                        <img :src="item.images.small">
                    </div>
                    <p>
                        {{item.title|substr(6)}}&nbsp;&nbsp;
                        <van-tag plain type="danger">{{item.year}}</van-tag>
                    </p>
                    <p>
                        <van-tag mark type="danger" v-for="val in item.genres" :key="val">{{val}}</van-tag>
                    </p>

                </div>
            </van-col>
        </van-row>
    </div>
</template>
<script>
import {getMovieList,getMockList} from  '../../api/api.js'
import Vue from "vue";
import { Row, Col } from "vant";
import { Tag } from "vant";
//单元格组件
import { Cell, CellGroup } from "vant";
Vue.use(Row)
    .use(Col)
    .use(Tag)
    .use(Cell)
    .use(CellGroup);
export default {
    data(){
        return {
            itemTitle:'top250',
            list:[]
        }
    },
    mounted(){
        getMockList('top250').then(res=>{
            console.log(res);
             this.list=res
        });
    },
    methods:{
         showDetail(movieId) {
            this.$router.push({
                path: "/moviedetail",
                query: { id: movieId }
            });
        }
    }
}
</script>
<style lang="less">

</style>


